<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 渲染永远是晚于微任务渲染的，不会出现渲染2次的情况
        // 动画：无缝滚动。。。 涉及强制渲染
        document.body.style.background = 'red';
        console.log(1)
        setTimeout(()=>{
            console.log(2)
            document.body.style.background = 'yellow';
        },20)
        // 先清空主栈代码（宏任务） -> 清空所有微任务 -> 渲染 -> 取下一个宏任务
        console.log(3);
    </script>
</body>
</html>